<template>
    <div class="wypayBox">
        <h3>选择房间号</h3>
        <p>您已选择：
            {{xqDataItem.name}} / {{loudongItem.name}} / {{danyuanItem.name}} / {{fangjianItem.name}}
        </p>
        <div class="fItem">
            <my-select v-model="formData.xiaoqu" :lists="xqData" placeholder='请选择小区' @change="getBuilding"/>
        </div>
        <div class="fItem">
            <my-select v-model="formData.loudong" :lists="loudong" placeholder='请选择楼栋' @change="getUint"/>
        </div>
         <div class="fItem">
            <my-select v-model="formData.danyuan" :lists="danyuan" placeholder='请选择单元' @change="getRoom"/>
        </div>
        <div class="fItem">
            <my-select v-model="formData.fangjian" :lists="fangjian" placeholder='请选择房间号' @change="getRoomItem"/>
        </div>
        <div class="phone" v-show="fangjianItem.phone">
            <h4>补全手机号</h4>
            <div class="butxt">{{phoneFrefix}}
                <input ref="p1" v-model="phone1" type="number" @keydown="phone1=''" @input="setFcous($event,'p2','phone1')"/>
                <input ref="p2" v-model="phone2" type="number" @keydown="phone2=''" @input="setFcous($event,'p3','phone2')"/>
                <input ref="p3" v-model="phone3" type="number" @keydown="phone3=''" @input="setFcous($event,'p4','phone3')"/>
                <input ref="p4" v-model="phone4" type="number" @keydown="phone4=''" @input="setFcous($event,'','phone4')"/>
                {{phoneSuffix}}
            </div>
        </div>
        <div class="btnWrap">
            <my-buttom txt="查询" @click="search"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,computed,onMounted,getCurrentInstance } from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useStore} from 'vuex'
import mySelect from '@/components/mySelect.vue'
import myButtom from '@/components/myButtom.vue'
import router from '../../../router'
export default {
    components:{
        mySelect,
        myButtom
    },
    setup(props,context) {
        const router = useRouter(), route = useRoute();
        const store = useStore()
        const {ctx,proxy} = getCurrentInstance()

        const state = reactive({
            carCode: computed(()=>store.state.carCode),
            paymentTypeId:'',
            formData:{
                xiaoqu:'',
                loudong:'',
                danyuan:'',
                fangjian:''
            },
            xqData:[],
            xqDataItem:'',  // 选择的小区
            loudong:[],
            loudongItem:'',
            danyuan:[],
            danyuanItem:'',
            fangjian:[],
            fangjianItem:'',
            phoneFrefix:'',
            phone1:'',
            phone2:'',
            phone3:'',
            phone4:'',
            phoneSuffix:''
        })

        onMounted(async ()=>{
            state.paymentTypeId = route.query.id
            // 获取小区
            store.dispatch('get_community_list',{paymentTypeId:state.paymentTypeId}).then(res=>{
                if(res.code == 200){
                    state.xqData = res.data
                }
            })
        })

        // 获取楼栋
        const getBuilding = item =>{
            state.xqDataItem = item
            console.log("小区:",item)
            store.dispatch('get_building_list',{paymentTypeId:state.paymentTypeId}).then(res=>{
                if(res.code == 200){
                    state.loudong = res.data
                }
            })
        }

        //获取单元
        const getUint = item =>{
            state.loudongItem = item
            console.log("楼栋：",item)
            store.dispatch('get_unit_list',{
                buildingId:item.id,
                paymentTypeId: state.paymentTypeId
            }).then(res=>{
                if(res.code == 200){
                    state.danyuan = res.data
                }
            })
        }

        //获取房间号
        const getRoom = item =>{
            state.danyuanItem = item
            console.log("房间",item)
            store.dispatch('get_room_list',{
                unitId:item.id,
                paymentTypeId:state.paymentTypeId
            }).then(res=>{
                if(res.code == 200){
                    state.fangjian = res.data
                }
            })
        }

        const getRoomItem = item =>{
            state.fangjianItem = item
            if(item.phone){
                state.phoneFrefix = item.phone.substring(0,3)
                state.phoneSuffix = item.phone.substring(7,11)
                setTimeout(()=>{
                    proxy.$refs.p1.focus()
                },400)
            } 
        }
        const setFcous = (e,ele,prop) =>{
            if(state[prop] || state[prop]==0){    
                ele && proxy.$refs[ele].focus()  // 获取焦点
            }
        }

        const search = async ()=>{
            
            if(!state.xqDataItem){
                return alert("请选择小区")
            }else if(!state.loudongItem){
                return alert("请选择楼栋") 
            }else if(!state.danyuanItem){
                return alert("请选择单元")
            }else if(!state.fangjianItem){
                return alert("请选择房间")
            }else if(!state.phone1 || !state.phone2 || !state.phone3 || !state.phone4){
                alert("请补全手机号")
                if(!state.phone1){
                    proxy.$refs.p1.focus()
                }else if(!state.phone2){
                    proxy.$refs.p2.focus() 
                }else if(!state.phone3){
                    proxy.$refs.p3.focus() 
                }else if(!state.phone4){
                    proxy.$refs.p4.focus() 
                }
                return 
            }
            const res = await store.dispatch('verify_room',{
                phone:state.phoneFrefix+state.phone1+state.phone2+state.phone3+state.phone4+state.phoneSuffix,
                roomId:state.fangjianItem.id
            })
            if(res.success){
                const selectinfo = {
                    xqDataItem:state.xqDataItem,
                    loudongItem:state.loudongItem,
                    danyuanItem:state.danyuanItem,
                    fangjianItem:state.fangjianItem
                }
                sessionStorage.setItem('selectinfo',JSON.stringify(selectinfo))
                router.push('/pay/wy/doPay')
            }else{
                alert(res.message)
                proxy.$refs.p1.focus()
            }
            
        }

        return{
            ...toRefs(state),
            getBuilding,
            getUint,
            getRoom,
            search,
            getRoomItem,
            setFcous
        }
    },
}
</script>

<style lang="scss" scoped>
    .wypayBox{
        h3{
            text-align: center;
            font-weight: 600;
            padding: 0;
            margin: 0;
            font-size: 35px;
            color: #ffffff;
        }
        p{
            text-align: center;
            padding: 2px 0 14px 0;
            margin: 0;
            font-size: 24px;
            color: #ffffff; 
        }
        .fItem{
            width: 700px;
            margin: 0 auto;
            &+.fItem{
                margin-top:24px ;
            }
        }
        .phone{
            padding: 30px 0 0 0;
            text-align: center;
            h4{
                font-size: 34px;
                font-weight: 600;
                color: #fff;
            }
            .butxt{
                display: flex;
                justify-content: center; /* 水平居中 */
                align-items: center;     /* 垂直居中 */
                height: 70px;
                font-size: 40px;
                font-weight: 600;
                color: #fff;
                margin: 20px 0 0 0;
                letter-spacing: 12px;
                input{
                    width: 70px;
                    height: 70px;
                    line-height: 68px;
                    border: 2px solid #fff;
                    border-radius:5px ;
                    background: none;
                    color: #fff;
                    text-align: center;
                    outline: none;
                    font-size: 40px;
                    font-weight: 600;
                    margin: 0 15px;
                }
            }
        }
        .btnWrap{
            width: 700px;
            margin: 0 auto;
            padding: 28px 0 0 0;
        }
    }
</style>